<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 1000px;
            margin: 20px auto;
        }
    </style>
    <!-- 新 Bootstrap4 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
</head>

<body>
    <div id="root">

    </div>
</body>
<script src="./react.js"></script>
<script src="./react-dom.js"></script>
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
<!-- bootstrap.bundle.min.js 用于弹窗、提示、下拉菜单，包含了 popper.min.js -->
<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
<!-- 最新的 Bootstrap4 核心 JavaScript 文件 -->
<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script type="text/babel">
    //1. 创建App根组件类
    class App extends React.Component {
        // constructor(){
        //     super();
        //     this.state = {

        //     }
        // }
        // 张三李四的数据 存放在state状态里
        state = {
            // 2.学生列表
            stuList: [
                {
                    name: "张三",
                    age: 18,
                    sex: "男",
                    phone: 110
                }, {
                    name: "李四",
                    age: 20,
                    sex: "女",
                    phone: 120
                }
            ],
            title: "添加学生",
            // 记录当前要修改的学生索引
            index:null
        }
        //5. 点击确认添加 获取输入框内容----- 创建ref属性
        usernameRef=React.createRef();
        ageRef = React.createRef();
        sexRef = React.createRef();
        phoneRef = React.createRef();
        // 11.  定义ref   隐藏显示模态框
        modeRef = React.createRef();
        render() {
            let { stuList } = this.state;
            return (
                <div className='box'>
                    <button type="button" className="btn btn-primary" data-toggle="modal" data-target="#myModal">添加学生</button>
                    <br /> <br />
                    <table className="table table-bordered table-hover">
                        <thead>
                            <tr>
                                <th>姓名</th>
                                <th>性别</th>
                                <th>年龄</th>
                                <th>联系方式</th>
                                <th>操作</th>
                            </tr>
                        </thead>
                        <tbody>
                            {/*3. 把学生列表 渲染到这tbody里面   解构遍历*/}
                            {
                                stuList.map((item, index) => {
                                    return (
                                        <tr key={index}>
                                            <td>{item.name}</td>
                                            <td>{item.sex}</td>
                                            <td>{item.age}</td>
                                            <td>{item.phone}</td>
                                            <td>
                                                <button type="button" className="btn btn-danger btn-sm" onClick={()=>{
                                                    stuList.splice(index,1);
                                                    {/*17. 绑定onClick回调函数 splice 索引   删除一个
                                                    更新状态  删除后的数据  */}
                                                    this.setState({
                                                        stuList:stuList
                                                    })
                                                }}>删除</button>
                                                &nbsp;  &nbsp;
                                                <button type="button" className="btn btn-primary btn-sm">编辑</button>
                                            </td>
                                        </tr>
                                    )
                                })
                            }
                        </tbody>
                    </table>
                    {/* 4. 模态框 （当作虚拟dom）  class改className  12 绑定隐藏moderef*/}
                    <div className="modal fade" id="myModal" ref={this.modeRef}>
                        <div className="modal-dialog">
                            <div className="modal-content">
                                <div className="modal-header">
                                    <h4 className="modal-title">添加学生</h4>
                                    <button type="button" className="close" data-dismiss="modal">&times;</button>
                                </div>
                                {/* 5.输入框  class 改 className      6. 绑定ref */}
                                <div className="modal-body">
                                    <div className="input-group mb-3">
                                        <div className="input-group-prepend">
                                            <span className="input-group-text">姓名</span>
                                        </div>
                                        <input type="text" className="form-control" placeholder="请输入姓名" ref={this.usernameRef}/>
                                    </div>
                                    <div className="input-group mb-3">
                                        <div className="input-group-prepend">
                                            <span className="input-group-text">年龄</span>
                                        </div>
                                        <input type="text" className="form-control" placeholder="请输入年龄" ref={this.ageRef}/>
                                    </div>
                                    <div className="input-group mb-3">
                                        <div className="input-group-prepend">
                                            <span className="input-group-text">性别</span>
                                        </div>
                                        <input type="text" className="form-control" placeholder="请输入性别" ref={this.sexRef}/>
                                    </div>
                                    <div className="input-group mb-3">
                                        <div className="input-group-prepend">
                                            <span className="input-group-text">联系方式</span>
                                        </div>
                                        <input type="text" className="form-control" placeholder="请输入联系方式" ref={this.phoneRef}/>
                                    </div>
                                </div>
                                <div className="modal-footer">
                                    <button type="button" className="btn btn-success"  onClick={()=>this.comfirmAdd()}>确认添加</button>
                                </div>

                            </div>
                        </div>
                    </div>
                </div>
            )
        }
        //7. 定义方法  this指向组件实例
        comfirmAdd(){
            // 获取姓名 // 获取dom对象
            let name = this.usernameRef.current.value;
            // 获取年龄
            let age = this.ageRef.current.value;
            // 获取性别
            let sex = this.sexRef.current.value;
            // 获取联系方式
            let phone = this.phoneRef.current.value;

            console.log(name,age,sex,phone)
            // 8. 判断为空
            if(!name || !age || !sex || !phone){
                // 更新状态 不隐藏模态框
                alert("请您补充完整信息")
                return
            }
            //16. 判断用户名name  是否存在列表中
            let index = this.state.stuList.findIndex(item=>{
                return item.name === name;
            })
            
            if(index!==-1){
                alert("当前学生已存在");
                return
            }
            // 9 拼接成一个对象
            let user = {
                name,
                age,
                sex,
                phone
            }
            this.state.stuList.push(user);
            // 10. 调用render方法  更新状态
            this.setState({
                stuList:this.state.stuList,
            },()=>{
                //15. 添加成功  清空输入框；
                this.usernameRef.current.value = "";
                this.ageRef.current.value = "";
                this.sexRef.current.value = '';
                this.phoneRef.current.value = '';
                //13. 隐藏模态框
                this.modeRef.current.style.display='none';
                //14 
                $('.modal-backdrop').hide();
            })
        }
    }
// 渲染app组件 渲染到root组件
    ReactDOM.render(<App />, document.getElementById("root"))
</script>

</html>